<template>
  <div>

  </div>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
console.log('GUI',GUI);
const gui = new GUI();//创建GUI对象 
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry( 25, 25, 25 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material );
// mesh.position.set( 0, 0, 0 );
scene.add( mesh );
gui.add(mesh.position, 'x', 0, 180);
gui.add(mesh.position, 'y', 0, 180);
gui.add(mesh.position, 'z', 0, 180);
const axesHelper = new THREE.AxesHelper( 150 );
axesHelper.setColors(0xff0000, 0x00ff00, 0x0000ff);
scene.add( axesHelper );
// 创建相机
const camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 250, 250, 250 );
camera.lookAt( mesh.position );
// 咔拍 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
// const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();
  export default {
    
  }
</script>

<style scoped>

</style>